<template>
  <div class="box">
    <p class="title">最新报名</p>
    <vue-seamless-scroll
      :data="repList"
      :class-option="optionSingleHeight"
      class="seamless-warp"
    >
      <div class="item">
        <p v-for="item in repList" :key="item" class="text">{{ item }}</p>
      </div>
    </vue-seamless-scroll>
  </div>
</template>

<script>
export default {
  data() {
    return {
      repList: [
        "张** 132****5536 已报名",
        "秦** 151****5225 已报名",
        "何** 158****7246 已报名",
        "赵** 158****3288 已报名",
        "张** 136****6892 已报名",
        "何** 136****8874 已报名",
        "张** 132****5536 已报名",
        "秦** 151****5225 已报名",
        "何** 158****7246 已报名",
        "赵** 158****3288 已报名",
        "张** 136****6892 已报名",
        "何** 136****8874 已报名"
      ],
      publicPath: process.env.BASE_URL
    };
  },
  computed: {
    optionSingleHeight() {
      return {
        singleHeight: 20
      };
    }
  }
};
</script>

<style scoped>
.seamless-warp {
  height: 100%;
  overflow: hidden;
}
.box {
  width: 70%;
  height: 100px;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  opacity: 0.6;
  position: absolute;
  padding-top: 4px;
  margin-top: 18px;
}
.title {
  margin: 0;
  color: #000;
  font-size: 12px;
  text-align: center;
  background-image: url("./../assets/hot.png");
  background-repeat: no-repeat;
  background-size: 9px;
  background-position-x: 78%;
}
.text {
  color: #d2bca2;
  font-size: 9px;
  margin: 0;
  height: 20px;
  /* line-height: 20px; */
  text-align: center;
}
</style>
